{% extends 'layout/baseSite.html' %}
{% load static %}
{% block title %}病历识别{% endblock %}
{% block title2 %}病历识别{% endblock %}
{% block birc %}病历识别{% endblock %}

{% block css %}
    <style>
        body{
    	    text-align: center;
        }
        .hcqFont{position:relative;letter-spacing:.07em;font-size:20px;font-weight:normal;margin:0 auto}
        .hcqFont:before,.hcqFont:after{position:absolute;top:0;left:0;right:0}
        .hcqStyle2{display:inline-block;font-weight:bold;color:#def;text-shadow:0 0 1px currentColor,-1px -1px 1px #000,0 -1px 1px #000,1px -1px 1px #000,1px 0 1px #000,1px 1px 1px #000,0 1px 1px #000,-1px 1px 1px #000,-1px 0 1px #000;-webkit-filter:url(#diff1);filter:url(#diff1);/*background:#def;padding:0 .2em*/}
        .wrapper .input-data{
            width: 100%;
            height: 40px;
            position: relative;
        }
        .wrapper .input-data input{
            width: 100%;
            height: 100%;
            border: none;
            border-bottom: 2px solid silver;
            font-size: 17px;
        }
        .input-data input:focus ~ label,
        .input-data input:valid ~ label{
            transform: translateY(-20px);
            font-size: 20px;
            color: #4158D0;
        }
        .wrapper .input-data label{
            position: absolute;
            bottom: 10px;
            left: 0;
            color: grey;
            pointer-events: none;
            transition: all 0.3s ease;
        }
        .wrapper .input-data .underline{
            position: absolute;
            bottom: 0px;
            height: 2px;
            width: 100%;
        }
        .input-data .underline:before{
            position: absolute;
            content: "";
            height: 100%;
            width: 100%;
            background: #4158D0;
            transform: scaleX(0);
            transition:transform 0.3s ease;
        }

        .input-data input:focus ~ .underline:before,
        .input-data input:valid ~ .underline:before{
            transform: scaleX(1);
        }
        form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

label {
    font-weight: bold;
    margin-bottom: 10px;
}

input[type="file"] {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
}

input[type="submit"] {
    padding: 5px 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: #0056b3;
}
    </style>

{% endblock %}

{% block content %}
    <div class="container-fluid py-4">
        <div style="width: fit-content;margin: 30px auto;text-align: center;">
            <h3>欢迎来到病历识别界面</h3>
        </div>
        <form action="/web/bingli/" method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    <p>
                        <label for="ph">病历图片：</label><input type="file" name="photo" id="ph"/>
                    </p>
                    <p>
                        <label for="sb">识别：</label><input type="submit" value="识别"/>
                    </p>
        </form>
        <div style="width: fit-content;margin: 30px auto;text-align: left;float: left;padding-left: 50px">
            {% if bingli_content %}
                <p class="hcqFont hcqStyle2">
                {% for sentence in bingli_content %}
                    {{ sentence }}<br>
                {% endfor %}
                </p>
            {% endif %}
            <br>

        </div>
    </div>

    <script type="text/javascript">
      $("#blGo").addClass("active");
    </script>
{% endblock %}